<template>
  <view class="license-plate-container">
    <view class="help-message">请绑定真实有效车牌</view>
    <view class="plate-input-container">
      <view class="plate-input-wrapper">
        <input
          class="plate-input"
          placeholder="请点此输入"
          v-model.trim="plateNo"
          disabled="true"
        />
        <view style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;" @tap="plateShow = true"></view>
      </view>
    </view>
    <view class="plate-action-container">
      <button class="bind-btn" @click="submit">确认绑定</button>
    </view>
    <plateInput
      v-if="plateShow"
      :plate="plateNo"
      @export="setPlate"
      @close="plateShow = false"
    />
  </view>
</template>
<script lang="ts">
import Vue from "vue";
import plateInput from "@/components/uni-plate-input/uni-plate-input.vue";

export default Vue.extend({
  components: { plateInput },
  onLoad(option: any) {
    if (option.id) {
      this.plateId = option.id
    }
  },
  data() {
    return {
      plateId: "",
      plateNo: "",
      plateShow: false,
    };
  },
  methods: {
    setPlate(plate: string) {
      if (plate.length >= 7) this.plateNo = plate;
      this.plateShow = false;
    },
    submit() {
      if (this.plateId) {
        uni.showLoading({ title: "正在修改车牌号" });
        this.$mainApi.apiPutCarNumber(this.plateId, this.plateNo).then(res => {
          uni.hideLoading();
          console.log(res)
          let { status_code, message, data } = res
          if (status_code !== 200) {
            uni.showModal({
              title: "修改失败",
              content: message,
              showCancel: false,
            })
          } else {
            uni.showToast({ title: "修改车牌号成功" });
            location.href = "/#/pages/parking/index";
          }
        });
      } else {
        uni.showLoading({ title: "正在新增车牌号" });
        this.$mainApi.apiPostCarNumber(this.plateNo).then(res => {
          uni.hideLoading();
          console.log(res)
          let { status_code, message, data } = res
          if (status_code !== 200) {
            uni.showModal({
              title: "新增失败",
              content: message,
              showCancel: false,
            })
          } else {
            uni.showToast({ title: "新增车牌号成功" });
            location.href = "/#/pages/parking/index";
          }
        });
      }
    }
  },
});
</script>
<style>
.license-plate-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.help-message {
  color: #808080;
  font-size: 12px;
  margin-bottom: 15px;
  text-align: center;
}

.plate-input-container {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 15px;
}

.plate-input-container .plate-input-wrapper {
  border: 1px solid #808080;
  padding: 5px 15px;
  border-radius: 5px;
  position: relative;
}

.plate-action-container {
  padding: 0px 15px;
  margin-bottom: 20vh;
}

.plate-action-container .bind-btn {
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
  background: #006b65;
}
</style>